{% extends 'base.html' %}
{% block title %}
  用户注册
{% endblock %}
{% block styles %}
{{ super() }}
    <style>
        #container{
            padding-top: 20px;
            width: 1000px;
            height: 600px;
            margin: 0 auto;
        }

    </style>
{% endblock %}

{% block newcontent %}
    <div id="container">
    <h1>用户注册</h1>
    <form class="form-horizontal" method="post" action="{{ url_for('user.register') }}">
        <p style="color: red">{{ msg }}</p>
  <div class="form-group">
    <label for="inputUsername" class="col-md-2 control-label">用户名</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputUsername" name="username" placeholder="username">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-md-2 control-label">密码</label>
    <div class="col-sm-6">
      <input type="password" class="form-control" id="inputPassword" name="password" placeholder="Password">
    </div>
  </div>
        <div class="form-group">
    <label for="inputConfirm" class="col-md-2 control-label">确认密码</label>
    <div class="col-sm-6">
      <input type="password" class="form-control" id="inputConfirm" name="repassword" placeholder="Confirm password">
    </div>
  </div>
        <div class="form-group">
    <label for="inputPhone" class="col-md-2 control-label">手机号码</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputPhone" name="phone" placeholder="Phone number"><span></span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-md-10">
      <button type="submit" class="btn btn-primary col-md-3">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
    </div>
  </div>
</form>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        $('#inputPhone').blur(function(){
            let phone = $(this).val();
            let span_ele = $(this).next('span');
            if(phone.length == 11){
                span_ele.text('');
                $.get('{{ url_for('user.check_phone') }}', {phone:phone}, function(data){
                   // console.log(data);
                    if(data.code!=200) {
                        span_ele.css({"color":"#ff0011"});
                        span_ele.text(data.msg);
                    }
            })}
            else{
                span_ele.css({"color":"#ff0011"});
                span_ele.text('手机格式错误');
            }
        })
    </script>
{% endblock %}